<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>个人博客--首页</title>
    <!-- 引入vue.js -->
    <script src="../node_modules/vue/dist/vue.js"></script>
    <!-- 引入vue-resource -->
    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
    <!-- 引入Element-UI样式 -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <!-- 引入Element-UI组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 轮播图 -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.css" />
    <link
      rel="stylesheet"
      href="https://unpkg.com/swiper/swiper-bundle.min.css"
    />
    <script src="https://unpkg.com/swiper/swiper-bundle.js"></script>
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js.map"></script>
    <!-- 基本样式 -->
    <link rel="stylesheet" href="../assets/css/reset.css" />
    <link rel="stylesheet" href="../assets/css/index.css" />
    <link rel="stylesheet" href="../assets/css/common.css" />
    <!-- icon -->
    <link
      rel="stylesheet"
      href="//at.alicdn.com/t/font_3010787_sbtn2g4e0o.css"
    />
  </head>
  <body>
    <div id="app" class="container">
      <template>
        <el-backtop target=".container"></el-backtop>
      </template>
      <!-- 顶栏 -->
      <header class="header grid">
        <div class="logo-wrapper grid-cell u-lof4">
          <img src="../assets/images/Logo01.png" alt="" />
        </div>
        <div class="menu grid-cell">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            active-text-color="#f13b3a"
          >
            <el-menu-item index="1">Home</el-menu-item>
            <el-submenu index="2">
              <template slot="title">Category</template>
              <el-menu-item
                v-for="category in categories"
                :key="category.category_id"
                :index="`2-${category.category_id}`"
                >{{category.category_alias}}</el-menu-item
              >
            </el-submenu>
            <el-menu-item index="3">Contact Author</el-menu-item>
          </el-menu>
        </div>
        <div class="login grid-cell u-lof4">
          <a href="http://localhost:8080/login">
            <i class="el-icon-user-solid"></i>
            Administrator Login
          </a>
        </div>
      </header>
      <div class="line"></div>
      <!-- 主体 -->
      <div class="main">
        <!-- 滚动图片 -->
        <div class="main-top">
          <div class="swiper">
            <div class="swiper-wrapper">
              <!-- 可用列表循环优化 -->
              <div class="swiper-slide">
                <img src="../assets//images/bg1-index.jpg" alt="" />
                <div class="content">
                  <span class="first-word">Travel</span>
                  <h1>
                    Never let anything stop you from chasing your dream from
                    working or playing or falling in love.
                  </h1>
                </div>
              </div>
              <div class="swiper-slide">
                <img src="../assets//images/bg2-index.jpg" alt="" />
                <div class="content">
                  <span class="first-word">Food</span>
                  <h1>
                    life was like a box of chocolates, you never know what
                    you`re gonna get.
                  </h1>
                </div>
              </div>
              <div class="swiper-slide">
                <img src="../assets//images/bg3-index.jpg" alt="" />
                <div class="content">
                  <span class="first-word">Mood</span>
                  <h1>The higher I got, the more amazed I was by the view.</h1>
                </div>
              </div>
            </div>
            <!-- 轮播分页器 -->
            <div class="swiper-pagination" style="display: none"></div>
          </div>
        </div>
        <!-- 主体博客 -->
        <div class="main-body">
          <!-- 侧边栏 -->
          <div class="main-left">
            <div class="categories">
              <h5>Blog Categories</h5>
              <ul>
                <li v-for="category in categories" :key="category.category_id">
                  <a :href="['./category.html?'+category.category_id]">
                    <span>{{category.category_alias}}</span>
                    <span>({{category.article_total}})</span>
                  </a>
                </li>
              </ul>
            </div>
            <div class="splite"></div>
            <div class="author">
              <h5>Author Information</h5>
              <img src="../assets/images/author.png" alt="" />
              <h3>Group 3</h3>
              <p>
                One advanced diverted domestic repeated bringing you old.
                Possible procured her trifling laughter though.
              </p>
              <div>
                <a href=""><i class="iconfont icon-facebook-fill"></i></a>
                <a href=""><i class="iconfont icon-weixin"></i></a>
                <a href=""><i class="iconfont icon-qq"></i></a>
              </div>
            </div>
            <div class="splite"></div>
          </div>
          <!-- 博客 -->
          <div class="main-right">
            <!-- 热门博客 -->
            <div class="hot">
              <h2>Popular blogs</h2>
              <div
                class="blogs"
                v-for="blog in hotBlogs"
                :key="blog.article_id"
              >
                <h3 class="title">{{blog.title}}</h3>
                <img
                  :src="`http://localhost:7001/public/articles/${blog.id}/cover.jpg`"
                  alt=""
                />
                <p class="abstract">{{blog.abstract}}</p>
                <el-row>
                  <el-col :span="4"
                    ><a :href="['./blog.html?'+blog.id]"
                      ><i class="iconfont icon-yuedu"></i> Continue Reading</a
                    ></el-col
                  >
                  <el-col :span="4" :offset="4"
                    ><a href="#"
                      ><i class="iconfont icon-shijian"></i>{{blog.pubdate}}</a
                    ></el-col
                  >
                  <el-col :span="4"
                    ><a href="#"
                      ><i class="iconfont icon-zuozhe"></i>{{blog.author}}</a
                    ></el-col
                  >
                  <el-col :span="4"
                    ><a href="#"
                      ><i class="iconfont icon-fenlei"></i
                      >{{blog.category_id}}</a
                    ></el-col
                  >
                  <el-col :span="4"
                    ><a href="#"
                      ><i class="iconfont icon-dianjiliang"></i
                      >{{blog.clicks}}</a
                    ></el-col
                  >
                </el-row>
                <div class="splite"></div>
              </div>
            </div>
            <!-- 最新博客 -->
            <div class="lately">
              <h2>Recent blogs</h2>
              <div
                class="blogs"
                v-for="blog in latedBlogs"
                :key="blog.article_id"
              >
                <h3 class="title">{{blog.title}}</h3>
                <img
                  :src="`http://localhost:7001/public/articles/${blog.id}/cover.jpg`"
                  alt=""
                />
                <p class="abstract">{{blog.abstract}}</p>
                <el-row>
                  <el-col :span="4"
                    ><a :href="['./blog.html?'+blog.id]"
                      ><i class="iconfont icon-yuedu"></i>Continue Reading</a
                    ></el-col
                  >
                  <el-col :span="4" :offset="4"
                    ><a href="#"
                      ><i class="iconfont icon-shijian"></i>{{blog.pubdate}}</a
                    ></el-col
                  >
                  <el-col :span="4"
                    ><a href="#"
                      ><i class="iconfont icon-zuozhe"></i>{{blog.author}}</a
                    ></el-col
                  >
                  <el-col :span="4"
                    ><a href="#"
                      ><i class="iconfont icon-fenlei"></i
                      >{{blog.category_id}}</a
                    ></el-col
                  >
                  <el-col :span="4"
                    ><a href="#"
                      ><i class="iconfont icon-dianjiliang"></i
                      >{{blog.clicks}}</a
                    ></el-col
                  >
                </el-row>
                <div class="splite"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 底部 -->
      <footer>
        <img src="../assets/images/Logo01.png" alt="logo" />
        <div>
          <el-button
            v-for="category in categories"
            type="info"
            round
            size="mini"
          >
            <a
              :href="['./category.html?'+category.category_id]"
              style="color: #fff"
              >{{category.category_alias}}</a
            >
          </el-button>
        </div>
        <div class="contact">
          <a href="#"><i class="iconfont icon-weixin"></i></a>
          <a href="#"><i class="iconfont icon-qq"></i></a>
          <a href="#"><i class="iconfont icon-facebook"></i></a>
        </div>
      </footer>
      <!-- 版权 -->
      <div class="copyright">
        Copyright © 2021.XinZhongDi Education All rights reserved
      </div>
    </div>

    <script>
      const vm = new Vue({
        el: '#app',
        data() {
          return {
            activeIndex: '1',
            page: 1,
            categories: [
              { category_id: 1, category_alias: '旅行', article_total: 20 },
              { category_id: 2, category_alias: '美食', article_total: 16 },
              { category_id: 3, category_alias: '心情', article_total: 2 },
            ],
            hotBlogs: [
              // {
              //   article_id: 1,
              //   title: 'Take only memories, leave only footprints',
              //   author: 'Group 3',
              //   pubdate: '2021-12-31',
              //   clicks: 344,
              //   category: 'travel',
              //   abstract:
              //     'One advanced diverted domestic set repeated bringing you old. Possible procured her trifling laughter thoughts property she met way. Companions shy had solicitude favourable own. Which could saw guest man now heard but. Lasted my coming uneasy marked so should. Gravity letters it amongst herself dearest an windows by. Wooded ladies she basket season age her uneasy saw. Discourse unwilling am no described dejection incommode no listening of. Before nature his parish boy.',
              // },
            ],
            latedBlogs: [
              // {
              //   pubdate: 1,
              //   title: 'Take only memories, leave only footprints',
              //   author: 'Group 3',
              //   pubdate: '2021-12-31',
              //   clicks: 344,
              //   category_id: 'travel',
              //   abstract:
              //     'One advanced diverted domestic set repeated bringing you old. Possible procured her trifling laughter thoughts property she met way. Companions shy had solicitude favourable own. Which could saw guest man now heard but. Lasted my coming uneasy marked so should. Gravity letters it amongst herself dearest an windows by. Wooded ladies she basket season age her uneasy saw. Discourse unwilling am no described dejection incommode no listening of. Before nature his parish boy.',
              // },
            ],
          }
        },
        created() {
          this.getCategories()
          this.getHotBlogs()
          this.getLatedBlogs()
        },
        methods: {
          getCategories() {
            //发送请求所有类别
            this.$http
              .get('http://127.0.0.1:7001/API/V1/categories/statistics')
              .then((res) => {
                const {
                  data: { result },
                } = res
                //console.log(result)
                this.categories = result.category_statistics
              })
          },
          getHotBlogs() {
            this.$http
              .get('http://127.0.0.1:7001/API/V1/articles', {
                params: {
                  pagesize: 3,
                  order: 'clicks',
                  reverse: 1,
                },
              })
              .then((res) => {
                const {
                  data: {
                    result: { article_infos },
                  },
                } = res
                //console.log(article_infos)
                this.hotBlogs = article_infos

                //console.log(this.hotBlogs)
                //获取类名
                this.hotBlogs.forEach((element) => {
                  //console.log(this.categories)
                  const index = this.categories.findIndex(
                    (item) => item.category_id == element.category_id
                  )
                  element.category_id = this.categories[index].category_alias
                  //console.log(this.categories[index].category_alias)
                })
              })
          },
          getLatedBlogs() {
            this.$http
              .get('http://127.0.0.1:7001/API/V1/articles', {
                params: {
                  pagesize: 2,
                  order: 'pubdate',
                  reverse: 1,
                },
              })
              .then((res) => {
                const {
                  data: {
                    result: { article_infos },
                  },
                } = res
                this.latedBlogs = article_infos
                // //判断与热门博客是否重复
                // const index = this.hotBlogs.findIndex(
                //   (item) => item.id == article_infos.id
                // )
                // if (index == -1) {
                //   this.latedBlogs = article_infos
                // } else {
                //   this.page += 1
                //   console.log(this.page)
                //   this.$http
                //     .get('http://127.0.0.1:7001/API/V1/articles', {
                //       params: {
                //         pagesize: 2,
                //         offset: 2,
                //         order: 'pubdate',
                //       },
                //     })
                //     .then((res) => {
                //       const {
                //         data: {
                //           result: { article_infos },
                //         },
                //       } = res
                //       this.latedBlogs = article_infos
                //     })
                // }
                //通过id找到文章对应的类名
                this.latedBlogs.forEach((element) => {
                  //console.log(this.categories)
                  const index = this.categories.findIndex(
                    (item) => item.category_id == element.category_id
                  )
                  element.category_id = this.categories[index].category_alias
                  //console.log(this.categories[index].category_alias)
                })
              })
          },
          handleSelect(key, keyPath) {
            let id = key.split('-')[1]
            //当点击某个类别时, 跳转页面
            if (key.split('-')[0] == 2) {
              window.location.href = './category.html?' + id
              this.activeIndex = `2-${id}`
            }
            if (key.split('-')[0] == 1) {
              window.location.href = './index.html'
              this.activeIndex = '1'
            }
            if (key.split('-')[0] == 3) {
              window.location.href = './contactAuthor.html'
              this.activeIndex = '3'
            }
          },
        },
      })

      var mySwiper = new Swiper('.swiper', {
        autoplay: true,
        // direction: 'vertical',
        loop: true,
        speed: 1000,
        pagination: {
          el: '.swiper-pagination',
          clickable: true,
        },
      })
    </script>
  </body>
</html>
